<template>
	<view class="me-info-container">
		<image class="me-info-image" src="../../static/logo.png" mode="widthFix"></image>
		<view class="me-info-body-container">
			<view class="me-info-body-part">
				<!-- <view class="me-info-body-item">
					<view class="me-info-label">用户名</view>：<view class="me-info-value">{{data.myinfo.username}}</view>
				</view> -->
				<view class="me-info-body-item">
					<view class="me-info-label">昵称</view>：<view class="me-info-value">{{data.myinfo.nickname}}</view>
				</view>
				<view class="me-info-body-item">
					<view class="me-info-label">个性签名</view>：<view class="me-info-value">{{data.myinfo.personality_front}}</view>
				</view>
			</view>
			<view class="me-info-body-part">
				<view class="me-info-body-item">
					<view class="me-info-label">手机号</view>：<view class="me-info-value">{{data.myinfo.phone}}</view>
				</view>
				<view class="me-info-body-item">
					<view class="me-info-label">邮箱</view>：<view class="me-info-value">{{data.myinfo.email}}</view>
				</view>
			</view>
			<view class="me-info-body-part">
				<view class="me-info-body-item" @click="goAddress">
					<view class="me-info-label">收货地址</view>
					<image class="me-info-body-image" src="../../static/go.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<button @click="goEdit" class="me-info-btn">编辑资料</button>
		
	</view>
</template>

<script>
	import global from "../../config/global.js"
	import {onMounted,reactive} from 'vue'
	import {onShow} from '@dcloudio/uni-app'
	export default {
		name:"my-info",
		setup(){
			let data = reactive({
				myinfo:{}
				
			})
			
			onShow(()=>{
				getData()
			})
			
			onMounted(()=>{
				getData()
			})
			
			function getData(){
				uni.request({
					method:"GET",
					url:global.BASE_URL+"/user/myinfo",
					header:{
						"mytoken":uni.getStorageSync("localtoken")
					},
					success: (res) => {
						// console.log(res)
						if(res.data.code){
							data.myinfo = res.data.data;
						}else{
							uni.showModal({								
								title: '信息获取错误',
								content: res.data.msg,
								showCancel: false,
								confirmText: '确定',
								success:(re)=>{
									// console.log(res.data.msg,typeof(res.data.msg))
									if(res.data.msg.includes("登录失效")){
										uni.navigateTo({
											url:'/pages/login/login'
										})
									}else uni.navigateBack()
								}
							})
						}
					}
				})
			}
			
			function goAddress(){
				uni.navigateTo({
					url:"/pages/me/my-address"
				})
			}
			
			function goEdit(){
				uni.navigateTo({
					url:`/pages/me/me-edit?info=${JSON.stringify(data.myinfo)}`
				})
			}
			
			return {
				data,
				goAddress,
				goEdit
			}
		}
	}
</script>

<style scoped>
	.me-info-container{
		width: 750rpx;
	}
	
	.me-info-image{
		width: 170rpx;
		margin: 50rpx 280rpx 0rpx 280rpx;
		border-radius: 600rpx;
		border: 10rpx solid #9BCDD2;
	}
	
	.me-info-body-container{
		width: 700rpx;
		margin: 10rpx 25rpx;
	}
	
	.me-info-body-item{
		position: relative;
		width: 650rpx;
		margin: 0rpx 25rpx;
		display: flex;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #cdcdcd;
		height: fit-content;
		/* align-items: center; */
	}
	
	.me-info-label{
		font-size: 36rpx;
		font-weight: bold;
		color: #515151;
		height: 50rpx;
		line-height: 50rpx;
		width: 150rpx;
		margin: 0rpx 5rpx;
		text-align-last:justify;
		text-align:justify;
		text-justify:distribute-all-lines;
	}
	
	.me-info-value{
		font-size: 30rpx;
		color: #515151;
		text-align: left;
		min-height: 50rpx;
		line-height: 50rpx;
		width: 470rpx;
		margin: 0rpx 5rpx;
	}
	
	.me-info-body-part{
		margin: 40rpx 0rpx;
	}
	
	.me-info-body-image{
		width: 50rpx;
		position: absolute;
		right: 10rpx;
	}
	
	.me-info-btn{
		width: 400rpx;
		padding: 0rpx 25rpx;
		margin: 10rpx 175rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #9BCDD2;
		color: white;
		font-size: 35rpx;
	}
</style>
